<template>
    <div class="ep-radio">
        <label class="ui-radio" :class="{'checked':model==value,'disabled':disabled}">
            <input type="radio" ref="radio" :value="value" @click="updateVal" :disabled="disabled">
        </label>
        <span>{{ text }}</span>
    </div>
</template>

<script>
var mask = document.createElement('div');
export default {
    name: 'Radio',
    model: {//自定义 v-model的 prop和event,这个定义的意思就是使用change事件更新model的值,以此来实时更新v-model的值
        prop: 'model',
        event: 'change'
    },
    props:{
        value:{//radio的value属性
            type:[String,Number],
            require:true
        },
        model:{//这里的model指的是上面定义的v-model的prop
            type:[String,Number],
            require:true
        },
        text:{
            type:String,
            default:''
        },
        checked:{//是否默认选中
            type:Boolean,
            default:false
        },
        disabled:{//是否禁用
            type:Boolean,
            default:false
        }
    },
    mounted:function(){//当dom渲染完成,判断组件是否默认选中
        if(this.checked===true)
            this.updateVal();
    },
    methods:{
        updateVal:function(){//当用户点击radio时,触发change事件更新v-model
            this.$emit('change',this.$refs.radio.value);
        }
    }
}
</script>

<style lang="less" scoped>
.ep-radio {
    display: inline;
    margin-right: .08rem;
    .ui-radio{
        width: 14px;
        height: 17px;
        display: inline-block;
        background:url('../assets/select_2.png') bottom no-repeat;
        background-size:100% auto;
        position: relative;
        input[type=radio]{
            opacity: 0;
            margin: 0;
        }
    }
    .ui-radio.disabled{
        border-color: #ccc;
    }
    .ui-radio.disabled::after{
        background:url('../assets/select_2_on.png') bottom no-repeat;
        background-size:100% auto;
    }
    .ui-radio.checked {
        background:url('../assets/select_2_on.png') bottom no-repeat;
        background-size:100% auto;
    }
}

</style>
